<template>
    <div class="goods">
			<div class="menu-wrapper" ref="menuWrapper">
					<ul>
							<li v-for="(item, index) in goods" :class="{active:currentIndex == index}" ref="menuList" @click="selectMenu(index,$event)">
								<span><i v-show="item.type>0" class="icon" :class="classMap[item.type]"></i>{{item.name}}</span>
							</li>
					</ul>
			</div>
			<div class="foods-wrapper" ref="foodsWrapper">
				<div>
					<div class="foods-item" v-for="item in goods" ref="foodList">
						<div class="title">{{item.name}}</div>
						<ul>
							<li v-for="food in item.foods">
								<div class="icon"><img :src="food.icon" width="57" height="57"></div>
								<div class="content">
									<div class="name">{{food.name}}</div>
									<div class="desc">{{food.description}}</div>
									<div class="extra">月售{{food.sellCount}}份 好评率{{food.rating}}%</div>
									<div class="price">
										<span class="now">￥{{food.price}}</span>
										<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
									</div>
									<div class="cartcontrol-wrapper">
										<cartcontrol :food="food"></cartcontrol>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<shopcart  :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"></shopcart>
			<!--  -->
    </div>
</template>

<script>
import BScroll from 'better-scroll';
import Shopcart from '../shopcart/shopcart';
import Cartcontrol from '../cartcontrol/cartcontrol';
const ERR_OK = 0;
const debug = process.env.NODE_ENV !== 'production';

export default {
    props: {
			seller: {
				type: Object
			}
    },
    data () {
			return {
				goods:[],
				listHeight:[],
				scrollY:0
			}
		},
		components:{
			Shopcart,
			Cartcontrol
		},
		computed:{
			currentIndex() {
        for (let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i + 1];
          if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
            this._followScroll(i);
            return i;
          }
        }
        return 0;
      },
			selectFoods() {
        let foods = [];
        this.goods.forEach((good) => {
          good.foods.forEach((food) => {
            if (food.count) {
              foods.push(food);
            }
          });
        });
        return foods;
      }
		},
    created () {
			this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
			const url = debug ? '/api/goods' : 'http://ustbhuangyi.com/sell/api/goods';
			this.$http.get(url).then((response) => {
					response = response.body;
					if (response.errno === ERR_OK) {
							this.goods = response.data;
							this.$nextTick(() => {
								this._initScroll();
								this._calculateHeight();
							});
					}
			});
		},
		methods:{
			selectMenu(index, event) {
        if (!event._constructed) {
          return;
        }
        let foodList = this.$refs.foodList;
        let el = foodList[index];
        this.foodsScroll.scrollToElement(el, 300);
      },
			_initScroll () {
				this.meunScroll = new BScroll(this.$refs.menuWrapper,{
					click: true,
				});
				this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
					click: true,
          probeType: 3
				});

				this.foodsScroll.on('scroll', (pos) => {
					// 判断滑动方向，避免下拉时分类高亮错误（如第一分类商品数量为1时，下拉使得第二分类高亮）
          if (pos.y <= 0) {
						this.scrollY = Math.abs(Math.round(pos.y));
          }
        });
			},
			_calculateHeight() {
        let foodList = this.$refs.foodList;
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
			},
			_followScroll(index) {
        let menuList = this.$refs.menuList;
        let el = menuList[index];
        this.meunScroll.scrollToElement(el, 300, 0, -100);
      }
		}
}
</script>
<style lang="stylus" scoped>
@import "../../common/stylus/mixin.styl"
.goods
	display flex
	position: absolute;
	top: 174px;
	bottom: 46px;
	width: 100%;
	overflow: hidden
.menu-wrapper
	width 80px
	.icon
		display: inline-block
		vertical-align: top;
		width: 12px;
		height: 12px;
		margin-right: 2px;
		background-size: 12px 12px;
		background-repeat: no-repeat;
		&.decrease
			bg-image('decrease_3')
		&.discount
			bg-image('discount_3')
		&.guarantee
			bg-image('guarantee_3')
		&.invoice
			bg-image('invoice_3')
		&.special
			bg-image('special_3')
	li
		height 54px
		width 100%
		display table
		background-color #f3f5f7
		font-size 12px;
		padding 0 12px
		box-sizing border-box
		line-height 14px
		&.active
			background-color #fff
		span
			display table-cell
			vertical-align middle

.foods-wrapper
	flex 1
	.title
		font-size 12px
		color:rgb(147,153,159)
		line-height 26px
		background-color #f3f5f7
		border-left 2px solid #d9dde1
		padding-left 14px;
.foods-item
	li
		margin 18px
		display flex
		position relative
		padding-bottom 18px
		.content
			flex 1
			line-height 1
		.name
			font-size 14px
			margin 2px 0 8px
			color rgb(7,17,27)
		.desc
			margin-bottom 8px
		.desc,.extra,.old
			font-size 10px
			color rgb(147,157,159)
		.price
			font-size 14px;
			font-weight 700
			line-height 24px
			color red
			.now
				margin-right 8px
		.icon
			margin-right 10px
.cartcontrol-wrapper
	position absolute
	bottom 12px
	right 0

</style>

